{% extends 'layouts/base.html' %}
{% load static %}
{% load humanize %}
{% load total_minutes %}

{% block content %}

    <section class="course-header-area">
        <div class="container">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="course-header-wrap">
                        <h1 class="title">{{ course.title }}</h1>
                        <p class="subtitle">{{ course.short_description|truncatewords:20 }}</p>
                        <div class="rating-row">
                            {#                            {{ --<span class="course-badge best-seller">Best seller</span>--}}#}
                            {% for i in i|rjust:5 %}
                                {% if forloop.counter <= 5 %}
                                    <i class="fas fa-star filled" style="color: #f5c85b;"></i>
                                {% else %}
                                    <i class="fas fa-star"></i>
                                {% endif %}
                            {% endfor %}
                            <span class="d-inline-block average-rating">5</span>
                            <span>(20 ratings)</span>
                            <span class="enrolled-num">
                                100 students enrolled
                            </span>
                        </div>
                        <div class="created-row">
                            {#                            {{ --<span class="created-by">--}}#}
                            {#                            {{ --Created by--}}#}
                            {#                            {{ --<a href="">first_name last_name</a>--}}#}
                            {#                            {{ --</span>--}}#}
                            <span class="last-updated-date">Created on {{ course.created_at|date }}</span>
                            <span class="last-updated-date">Last updated on {{ course.updated_at|date }}</span>
                            <span class="comment">
                                <i class="fas fa-comment"></i>English
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">

                </div>
            </div>
        </div>
    </section>

    <section class="course-content-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">

                    <div class="what-you-get-box">
                        <div class="what-you-get-title">What i will learn?</div>
                        <ul class="what-you-get__items">
                            <li>{{ course.outcome }}</li>
                        </ul>
                    </div>
                    <br>
                    <div class="course-curriculum-box">
                        <div class="course-curriculum-title clearfix">
                            <div class="title float-left">Lessons for this course</div>
                            <div class="float-right">
                                <span class="total-lectures">
                                    {{ course.lessons.count }} lessons
                                </span>
                                <span class="total-time">
                                    2 hours
                                </span>
                            </div>
                        </div>
                        <div class="course-curriculum-accordion">

                            <div class="lecture-group-wrapper">
                                <div class="lecture-group-title clearfix" data-toggle="collapse"
                                     data-target="#collapse"
                                     aria-expanded="false">
                                    <div class="title float-left">
                                        Lessons
                                    </div>
                                    <div class="float-right">
                                        <span class="total-lectures">
                                             {{ course.lessons.count }} lessons
                                        </span>
                                        <span class="total-time">
                                            {{ course.lessons|total_minutes | floatformat:2 }} minute
                                        </span>
                                    </div>
                                </div>

                                <div id="collapse" class="lecture-list collapse">
                                    <ul>
                                        {% for lesson in course.lessons.all %}
                                            <li class="lecture has-preview">
                                                <span class="lecture-title">{{ lesson.title }}</span>
                                                <span class="lecture-time float-right">{{ lesson.duration | floatformat:2 }}</span>
                                                <!-- <span class="lecture-preview float-right" data-toggle="modal" data-target="#CoursePreviewModal">Preview</span> -->
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="requirements-box">
                        <div class="requirements-title">Requirements</div>
                        <div class="requirements-content">
                            <ul class="requirements__list">
                                <li>{{ course.requirements }}</li>
                            </ul>
                        </div>
                    </div>
                    <div class="description-box view-more-parent">
                        <div class="view-more" onclick="viewMore(this,'hide')">
                            + View More
                        </div>
                        <div class="description-title">Description</div>
                        <div class="description-content-wrap">
                            <div class="description-content">
                                {{ course.description }}
                            </div>
                        </div>
                    </div>


                    <div class="compare-box view-more-parent">
                        <div class="view-more" onclick="viewMore(this)">+ View More</div>
                        <div class="compare-title">Other Related Courses</div>
                        <div class="compare-courses-wrap">

                        </div>
                    </div>

                    <div class="about-instructor-box">
                        <div class="about-instructor-title">
                            About the instructor
                        </div>
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="about-instructor-image">
                                    <img src="" alt="" class="img-fluid">
                                    <ul>
                                        <!-- <li><i class="fas fa-star"></i><b>4.4</b> Average Rating</li> -->
                                        <li>
                                            <i class="fas fa-comment"></i><b>
                                            100
                                        </b> reviews
                                        </li>
                                        <li><i class="fas fa-user"></i><b>
                                            120
                                        </b> Students
                                        </li>
                                        <li>
                                            <i class="fas fa-play-circle"></i>
                                            <b>
                                                11
                                            </b> Courses
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-lg-8">
                                <div class="about-instructor-details view-more-parent">
                                    <div class="view-more" onclick="viewMore(this)">+ View More</div>
                                    <div class="instructor-name">
                                        <a href=""></a>
                                    </div>
                                    <div class="instructor-title">
                                        title
                                    </div>
                                    <div class="instructor-bio">
                                        biography
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="student-feedback-box">
                        <div class="student-feedback-title">
                            Student feedback
                        </div>
                        <div class="row">
                            <div class="col-lg-6 col-lg-offset-4">
                                <div class="average-rating">
                                    <div class="num">
                                        {#                                        {{ $course->average }}#}
                                        3
                                    </div>
                                    <div class="rating">
                                        {% for i in i|rjust:5 %}
                                            {% if forloop.counter <= 5 %}
                                                <i class="fas fa-star filled" style="color: #f5c85b;"></i>
                                            {% else %}
                                                <i class="fas fa-star" style="color: #abb0bb;"></i>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                    <div class="title">Average rating</div>
                                </div>
                            </div>
                            {#                            {{--<div class="col-lg-9">--}}#}
                            {#                                {{--<div class="individual-rating">--}}#}
                            {#                                    {{--<ul>--}}#}
                            {#                                        {{--@for($i = 1; $i <= 5; $i++)--}}#}
                            {#                                            {{--<li>--}}#}
                            {#                                                {{--<div class="progress">--}}#}
                            {#                                                    {{--<div class="progress-bar" style="width: 20%"></div>--}}#}
                            {#                                                {{--</div>--}}#}
                            {#                                                {{--<div>--}}#}
                            {#                                                    {{--<span class="rating">--}}#}
                            {#                                                        {{--@for($j = 1; $j <= (5 - $i); $j++)--}}#}
                            {#                                                            {{--<i class="fas fa-star"></i>--}}#}
                            {#                                                        {{--@endfor--}}#}
                            {#                                                        {{--@for($j = 1; $j <= $i; $j++)--}}#}
                            {#                                                            {{--<i class="fas fa-star filled"></i>--}}#}
                            {#                                                        {{--@endfor--}}#}
                            {#                                                    {{--</span>--}}#}
                            {#                                                    {{--<span>30%</span>--}}#}
                            {#                                                {{--</div>--}}#}
                            {#                                            {{--</li>--}}#}
                            {#                                        {{--@endfor--}}#}
                            {#                                    {{--</ul>--}}#}
                            {#                                {{--</div>--}}#}
                            {#                            {{--</div>--}}#}
                        </div>
                        <div class="reviews">
                            <div class="reviews-title">Reviews</div>
                            <ul>
                                <li>
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <div class="reviewer-details clearfix">
                                                <div class="reviewer-img float-left">
                                                    <img src="" alt="">
                                                </div>
                                                <div class="review-time">
                                                    <div class="time">
                                                        Review time
                                                    </div>
                                                    <div class="reviewer-name">
                                                        Name
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-8">
                                            <div class="review-details">
                                                <div class="rating">
                                                    {% for i in i|rjust:5 %}
                                                        {% if forloop.counter <= 5 %}
                                                            <i class="fas fa-star filled" style="color: #f5c85b;"></i>
                                                        {% else %}
                                                            <i class="fas fa-star" style="color: #abb0bb;"></i>
                                                        {% endif %}
                                                    {% endfor %}
                                                </div>
                                                <div class="review-text">
                                                    Review
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="course-sidebar natural">
                        <div class="preview-video-box">
                            <a data-toggle="modal" data-target="#CoursePreviewModal">
                                <img src="{% static 'images/learning.jpg' %}" alt="" class="img-fluid">
                                <span class="preview-text">Preview this course</span>
                                <span class="play-btn"></span>
                            </a>
                        </div>
                        <div class="course-sidebar-text-box">
                            <div class="price">
                                <span class="current-price">
                                    $<span class="current-price">{{ course.price | floatformat:2 | intcomma }}</span></span>
                                <input type="hidden" id="total_price_of_checking_out" value="{{ course.price | floatformat:2 }}">
                            </div>

                            {#                            {{ --<div class="buy-btns">--}}#}
                            {#                            {{ --<button class="btn btn-buy-now" type="button">Already purchased</button>--}}#}
                            {#                            {{ --</div>--}}#}
                            <div class="buy-btns">
                                {% if is_enrolled %}
                                    <button class="btn btn-add-cart" type="button"
                                            style="background-color: #00796b; border-color: #08796f; color: #ffffff">
                                        Go to course
                                    </button>
                                {% else %}
                                    {% if is_in_cart %}
                                        {#                                    <a href="" class="btn btn-buy-now" id="course_2" onclick="handleBuyNow(this)">Buy#}
                                        {#                                        now</a>#}
                                        <button class="btn btn-add-cart" type="button"
                                                style="background-color: #ec5252; border-color: #ec5252; color: #ffffff">
                                            Added to cart
                                        </button>
                                    {% else %}
                                        <form action="{% url 'cart:cart_add' course.slug %}" method="post">
                                            {% csrf_token %}
                                            <input type="hidden" value="" name="course_id">
                                            <input type="hidden" value="" name="name">
                                            <input type="hidden" value="" name="price">
                                            <input type="hidden" value="1" name="quantity">

                                            <button class="btn btn-add-cart" type="submit" id="cart">Add to cart
                                            </button>
                                        </form>
                                    {% endif %}
                                {% endif %}
                            </div>

                            <div class="includes">
                                <div class="title"><b>Includes:</b></div>
                                <ul>
                                    <li>
                                        <i class="far fa-file-video"></i>
                                        on demand videos
                                    </li>
                                    <li>
                                        <i class="far fa-file"></i> 30 lessons
                                    </li>
                                    <li><i class="far fa-compass"></i>Full lifetime access
                                    </li>
                                    <li>
                                        <i class="fas fa-mobile-alt"></i>Access on mobile and tv
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

{% endblock %}